<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-2">
    <el-button type="primary" icon="Back" text @click="handleBack">返回</el-button>
    <div class="top-page">
      <el-row :gutter="10">
        <el-col :span="8">
          <span>所属机型：{{ data.aircraftModel }}</span>
        </el-col>
        <el-col :span="16">
          <span>所属批次：{{ data.track }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <span>上传日期：{{ data.createTime }}</span>
        </el-col>
        <el-col :span="16">
          <div>
            文件名称：
            <span class="btn" @click="handleDownload">{{ data.originalName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <span>备注：{{ data.trackDesc }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="title">数据清单</div>
    <el-form :model="paramForm" inline size="small">
      <el-form-item label="部段名称">
        <el-input v-model="paramForm.sectionName" placeholder="请输入部段名称" clearable />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="paramForm.name" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">筛选</el-button>
      </el-form-item>
    </el-form>
    <el-table v-if="isComplate" ref="roleTableRef" v-loading="loading" :data="tableDatas">
      <el-table-column label="序号" align="center" prop="ord"></el-table-column>
      <el-table-column label="层次" prop="level" :show-overflow-tooltip="true" width="100" />
      <el-table-column label="主部段" prop="mainSection" width="100" />
      <el-table-column label="部段" prop="section" width="100"></el-table-column>
      <el-table-column label="ATA系统" prop="ata" width="100" />
      <el-table-column label="零组件编号" prop="code" width="100" />
      <el-table-column label="名称" prop="name" min-width="200" />
      <el-table-column label="版本" prop="version" width="100"></el-table-column>
      <el-table-column label="状态" prop="status" width="100"></el-table-column>
      <el-table-column label="数量" prop="cnt" width="100"></el-table-column>
      <el-table-column label="单件重量（KG）" prop="weight" width="100"></el-table-column>
      <el-table-column label="关重件" prop="importance" width="100"></el-table-column>
      <el-table-column label="类型" prop="type" width="100"></el-table-column>
      <el-table-column label="架次有效性" prop="flightRange" width="100"></el-table-column>
      <el-table-column label="所属DCI编号" prop="ownDciCode" width="100"></el-table-column>
      <el-table-column label="是否为变形件原件" prop="transformBlock" width="100"></el-table-column>
      <el-table-column label="附注信息" prop="comment" width="100" show-overflow-tooltip></el-table-column>
      <el-table-column label="历史信息">
        <el-table-column label="快速更改单编号" prop="quickModifiedBillCode" width="100"></el-table-column>
        <el-table-column label="ECP编号" prop="ecpCode" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="供应商信息">
        <el-table-column label="供应商设备编号" prop="supplierEquipCode" width="100"></el-table-column>
        <el-table-column label="供应商版本号" prop="supplierVersion" width="100"></el-table-column>
        <el-table-column label="供应商代号" prop="supplierCode" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="ETSI信息">
        <el-table-column label="ETSI编号" prop="etsiCode" width="100"></el-table-column>
        <el-table-column label="ETSI版本" prop="etsiVersion" width="100"></el-table-column>
        <el-table-column label="ETSI备注" prop="etsiComment" width="100"></el-table-column>
      </el-table-column>
    </el-table>
    <vxe-table v-else border show-overflow :edit-config="editConfig" :data="tableDatas">
      <vxe-column field="ord" title="序号" width="70"></vxe-column>
      <vxe-column field="level" title="层次" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.level" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="mainSection" title="主部段" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.mainSection" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="section" title="部段" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.section" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="ata" title="ATA系统" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.ata" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="code" title="零组件编号" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.code" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="name" title="名称" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="version" title="版本" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.version" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="status" title="状态" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.status" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="cnt" title="数量" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.cnt" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="weight" title="单件重量（KG）" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.weight" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="type" title="关重件" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.type" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="name" title="类型" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="flightRange" title="架次有效性" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.flightRange" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="ownDciCode" title="所属DCI编号" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.ownDciCode" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="transformBlock" title="是否为变形件原件" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.transformBlock" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column field="comment" title="附注信息" :edit-render="{ name: 'input' }">
        <template #edit="{ row }">
          <vxe-input v-model="row.comment" @blur="handleBlur(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-colgroup title="历史信息">
        <vxe-column field="quickModifiedBillCode" title="快速更改单编号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.quickModifiedBillCode" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="ecpCode" title="ECP编号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.ecpCode" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
      </vxe-colgroup>
      <vxe-colgroup title="供应商信息">
        <vxe-column field="supplierEquipCode" title="供应商设备编号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.supplierEquipCode" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="supplierVersion" title="供应商版本号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.supplierVersion" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="supplierCode" title="供应商代号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.supplierCode" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
      </vxe-colgroup>
      <vxe-colgroup title="ETSI信息">
        <vxe-column field="etsiCode" title="ETSI编号" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.etsiCode" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="etsiVersion" title="ETSI版本" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.etsiVersion" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="etsiComment" title="ETSI备注" :edit-render="{ name: 'input' }">
          <template #edit="{ row }">
            <vxe-input v-model="row.etsiComment" @blur="handleBlur(row)"></vxe-input>
          </template>
        </vxe-column>
      </vxe-colgroup>
    </vxe-table>
    <div v-if="!isComplate" class="tips">注：双击表格可以直接进行数据修改。</div>
    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="paramForm.pageNum"
      v-model:limit="paramForm.pageSize"
      class="p-b-3"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="DataView" lang="ts">
import { getOriginalInfo, downloadFile, getOriginDetailList, modifyOriginal } from '@/api/bomCompareTool/originInstallationList/index';
import type { VxeTablePropTypes } from 'vxe-table';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const infoId = ref('');
const router = useRouter();
const data = reactive({
  aircraftModel: '',
  track: '',
  subTrack: '',
  createTime: '',
  originalName: '',
  trackDesc: '',
  fileId: ''
});
const isComplate = ref(false);
const paramForm = reactive({
  aircraftModel: '',
  track: '',
  subTrack: '',
  sectionName: '',
  name: '',
  pageNum: 1,
  pageSize: 10
});
const total = ref(0);
const loading = ref(false);
const tableDatas = ref([]);
const getList = () => {
  loading.value = true;
  getOriginDetailList(paramForm)
    .then((res) => {
      total.value = res.total;
      tableDatas.value = res.rows;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};
const handleBack = () => {
  router.go(-1);
};
const initData = async () => {
  infoId.value = String(route.query.id);
  const res = await getOriginalInfo({ id: infoId.value });
  for (const key in data) {
    data[key] = res[key];
  }
  paramForm.aircraftModel = data.aircraftModel;
  paramForm.track = data.track;
  paramForm.subTrack = data.subTrack;
  if (res.status === 'DONE' && res.bizStep === 'OBOM_SBOM_CONVERT') {
    isComplate.value = true;
  } else {
    isComplate.value = false;
  }
  getList();
};
const fileDownload = (res, fileName) => {
  const blob = new Blob([res]);
  const objUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.setAttribute('href', objUrl);
  link.setAttribute('download', fileName);
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
const handleDownload = async () => {
  downloadFile(data.fileId).then((res) => {
    fileDownload(res, data.originalName);
  });
};
const handleQuery = () => {
  paramForm.pageNum = 1;
  getList();
};
const editConfig = ref<VxeTablePropTypes.EditConfig>({
  trigger: 'dblclick',
  mode: 'cell'
});
const handleBlur = async (row) => {
  const res = await modifyOriginal(row);
  proxy?.$modal.msgSuccess('修改成功!');
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.top-page {
  border-bottom: 1px solid #e4e4e4;
  font-size: 12px;
  padding: 12px;
  line-height: 24px;
}
.btn {
  color: #409eff;
  cursor: pointer;
}
.btn:hover {
  color: #1984ef;
}
.title {
  font-weight: 600;
  padding: 8px;
}
.tips {
  font-size: 12px;
  color: #878585;
  padding-top: 8px;
}
</style>
